<template>
  <div class="wrapper">
    <!--头部-->
    <header>
      <p>

        <i class="fa fa-caret-left" @click="toHomePage"></i>
      </p>
      <p>我的吃货豆</p>
    </header>
    <!--吃货豆显示-->


    <div class="pointNum">

      <img src="../assets/pointLogo.jpg">
      <h3>{{ pointShow }}</h3>


    </div>


    <div class="slogan">
      <p>吃货豆将在180天后失效</p>
    </div>


    <!--搜索框部分-->
    <div class="search">
      <div class="fixxed" ref="fixxedbox">
        <div @click="toPointLog()">
          <div class="left">
            <img src="../assets/left2.jpg">

          </div>
        </div>
        <div class="right">
          <img src="../assets/right2.jpg">
        </div>
      </div>
    </div>


    <!--功能选择-->


    <!--食品列表-->
    <ul class="food">
      <li>
        <div class="left">
          <img src="../assets/exchange1.png">
          <div class="info">
            <h3>厨房剪刀</h3>
            <h5>价值&#165;19.90&#921;兑换入手价&#165;10.50</h5>
            <div class="price">
              <img src="../assets/pointLogo.jpg">
              <p>1050</p>
            </div>
          </div>
        </div>

        <div class="right">
          <div>
            <img src="../assets/use.jpg" @click="product1">
          </div>
        </div>
      </li>
      <li>
        <div class="left">
          <img src="../assets/exchange2.png">
          <div class="info">
            <h3>茶语系列抽纸</h3>
            <h5>价值&#165;29.99&#921;兑换入手价&#165;16.99</h5>
            <div class="price">
              <img src="../assets/pointLogo.jpg">
              <p>1699</p>
            </div>
          </div>
        </div>

        <div class="right">
          <div>
            <img src="../assets/use.jpg" @click="product2">
          </div>
        </div>
      </li>
      <li>
        <div class="left">
          <img src="../assets/exchange4.png">
          <div class="info">
            <h3>腾讯视频VIP会员</h3>
            <h5>价值&#165;25.00&#921;兑换入手价&#165;19.99</h5>
            <div class="price">
              <img src="../assets/pointLogo.jpg">
              <p>1999</p>
            </div>
          </div>
        </div>

        <div class="right">
          <div>
            <img src="../assets/use.jpg" @click="product3">
          </div>
        </div>
      </li>
      <li>
        <div class="left">
          <img src="../assets/exchange5.png">
          <div class="info">
            <h3>优酷视频会员</h3>
            <h5>价值&#165;15.00&#921;兑换入手价&#165;9.99</h5>
            <div class="price">
              <img src="../assets/pointLogo.jpg">
              <p>999</p>
            </div>
          </div>
        </div>

        <div class="right">
          <div>
            <img src="../assets/use.jpg" @click="product4">
          </div>
        </div>
      </li>


    </ul>


  </div>
</template>


<script>
export default {
  name: 'PointUse',
  data() {
    return {
      user: {},
      pointShow:0
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
    this.queryWallet();
  },

  mounted() {
    document.onscroll = () => {
      //获取滚动条位置
      let s1 = document.documentElement.scrollTop;
      let s2 = document.body.scrollTop;
      let scroll = s1 == 0 ? s2 : s1;
      //获取视口宽度
      let width = document.documentElement.clientWidth;
      //获取顶部固定块

      let search = this.$refs.fixxedbox;

      //判断滚动条位置超过视口宽度的12%，搜索块变为固定定位
      if (scroll > width * 0.39) {
        search.style.position = 'fixed';
        search.style.left = '0';
        search.style.top = '0';
      } else {
        search.style.position = 'static'
      }
    }
  },
  destroyed() {
    //切到其他组件时去掉这个js
    document.onscroll = null;
  },

  methods: {
    queryWallet(){
      //TODO
      this.$axios.get('queryPoint', {
        params: {
          userId: this.user.userId,
        }
      }).then(response => {
        this.pointShow = response.data;
      }).catch(error => {
        console.error(error);
      });
    },
    toHomePage(){
      this.$router.push({path: '/homePage'});
    },
    toPointLog() {
      this.$router.push({path: '/pointLog'});
    },
    product1(){
      //TODO
      this.$axios.put('usePoint', this.$qs.stringify({
        userId: this.user.userId,
        pointAmount: 1050,
        transactionType: "兑换"
      })).then(response => {
        if (response.data != 1) {
          alert("兑换失败！")
        }
        if (response.data == 1) {
          alert("兑换成功！")
          this.queryWallet();
        }
      }).catch(error => {
        console.error(error);
      });
    },
    product2(){
      //TODO
      this.$axios.put('usePoint', this.$qs.stringify({
        userId: this.user.userId,
        pointAmount: 1699,
        transactionType: "兑换"
      })).then(response => {
        if (response.data != 1) {
          alert("兑换失败！")
        }
        if (response.data == 1) {
          alert("兑换成功！")
          this.queryWallet();
        }
      }).catch(error => {
        console.error(error);
      });
    },
    product3(){
      //TODO
      this.$axios.put('usePoint', this.$qs.stringify({
        userId: this.user.userId,
        pointAmount: 1999,
        transactionType: "兑换"
      })).then(response => {
        if (response.data != 1) {
          alert("兑换失败！")
        }
        if (response.data == 1) {
          alert("兑换成功！")
          this.queryWallet();
        }
      }).catch(error => {
        console.error(error);
      });
    },
    product4(){
      //TODO
      this.$axios.put('usePoint', this.$qs.stringify({
            userId: this.user.userId,
            pointAmount: 999,
            transactionType: "兑换"
      })).then(response => {
        if (response.data != 1) {
          alert("兑换失败！")
        }
        if (response.data == 1) {
          alert("兑换成功！")
          this.queryWallet();
        }
      }).catch(error => {
        console.error(error);
      });
    }


  }
}

</script>


<style scoped>
/**************************总容器**************************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

/**************************header**************************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #f6f6f6;
  color: #333333;
  font-size: 3.6vw;
  font-weight: bolder;
  letter-spacing: 2px;


  left: 0;
  top: 0;


  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper header p{
  margin-right: 35vw;
}

/**************************积分显示**************************/
.wrapper .pointNum {


  margin-top: 5vw;

  background-color: #f6f6f6;


  display: flex;

  align-items: center;

  user-select: none;
}

.wrapper .pointNum img {
  width: 6vw;
  height: 6vw;
  margin-left: 40vw;
}

.wrapper .pointNum h3 {
  font-size: 8vw;
  font-weight: bold;
  margin-left: 1vw;
  padding-bottom: 1vw;
  color: #333333;
}

.wrapper .slogan {

  margin-bottom: 6vw;
  justify-content: center;
  font-size: 2vw;
  display: flex;

  align-items: center;

  user-select: none;
}

.wrapper .slogan h5 {
  font-size: 1vw;
  font-weight: normal;
}

/**************************search**************************/
.wrapper .search {


  background-color: #f6f6f6;
  height: 11.5vw;


  display: flex;

  align-items: center;
}

.wrapper .search .left img {
  width: 16vw;
  height: 9vw;
  margin-left: 9vw;
}

.wrapper .search .right img {
  width: 16vw;
  height: 9vw;
  margin-left: 24vw;
}


.wrapper .search .fixxed {
  width: 100%;
  height: 11.5vw;
  background-color: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}


/**************************明细**************************/
.wrapper .food {
  width: 100%;
  background-color: #ffffff;
  border-radius: 12px 12px 12px 12px;
}

.wrapper .food li {

  width: 100%;
  height: 22vw;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;
  border-bottom: solid 1px #DDD;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .food li .left {


  display: flex;

  align-items: center;

  user-select: none;
}

.wrapper .food li .left img {

  width: 18vw;
  height: 18vw;
}

.wrapper .food li .left .info {
  background-color: #ffffff;
  width: 100%;
  height: 18vw;
  writing-mode: lr-tb;
  padding-left: 3vw;
  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  user-select: none;
}

.wrapper .food li .left .info h3 {

  font-size: 3.8vw;
  color: #333333;
  font-weight: bold;
}

.wrapper .food li .left .info h5 {
  font-size: 1.2vw;
  color: #888888;
  margin-bottom: 4vw;
  font-weight: lighter;

}

.wrapper .food li .left .info .price{
  display: flex;
  align-items: center;
}

.wrapper .food li .left .info .price p {
  font-size: 4vw;
  font-weight: bold;
  margin-bottom: 4vw;
  margin-left: 1vw;
  color: #FE2E2E;
}


.wrapper .food li .left .info .price img {
  width: 4.5vw;
  height: 4.5vw;
  margin-bottom: 4vw;
}


.wrapper .food li .right {
  width: 16vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .food li .right img {
  margin-left: 3vw;
  width: 8vw;
  height: 8vw;
}


</style>